<template>
  <main class="pug-pro-basicLayout-content pug-pro-basicLayout-has-header">
    <div class="pug-pro-page-container">
      <div class="pug-pro-page-container-warp">
        <div class="pug-page-header has-breadcrumb">
          <div class="pug-page-header-heading">
            <div class="pug-page-header-heading-left">
              <span class="pug-page-header-heading-title" title="分步表单">{{ opid ? '修改产品' : "添加产品" }}</span>
              编辑的id是:{{ opid }}
            </div>
          </div>
          <div class="pug-page-header-content">
            <div class="pug-pro-page-container-detail">
              <div class="pug-pro-page-container-main">
                <div class="pug-pro-page-container-row">
                  <div class="pug-pro-page-container-content">
                    用户管理页用于向用户收集或验证信息，分步用户管理常见于数据项较多的表单场景。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pug-pro-grid-content">
        <div class="pug-pro-grid-content-children">
          <div class="pug-pro-layout-watermark-wrapper" style="position: relative;">
            <div class="pug-pro-page-container-children-content">
              <div v-show="currentStep==1" class="pug-card mt20">
                <div class="pug-card-body">
                  <div class="pug-debug-result">{{sysloginuser}}</div>
                  <div class="pug-row" style="justify-content: center">

                    <div class="pug-col pug-col-lg-8" style="padding:0 30px;">
                      <div autocomplete="off" class="pug-form pug-form-vertical pug-form-hide-required-mark">
                         <input type="hidden" v-model="sysloginuser.id" cref="id"/>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="手机号">手机号
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入手机号" cref="phone" maxlen="32"  v-model="sysloginuser.phone" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="昵称，媒体号">昵称，媒体号
                                <span class='pug-valid-label'>(*必填)</span>
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入昵称，媒体号" cref="nickname" maxlen="50"  v-model="sysloginuser.nickname" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="唯一标识">唯一标识
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入唯一标识" cref="idcode" maxlen="16"  v-model="sysloginuser.idcode" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="请上传头像">请上传头像
                            </label>
                          </div>
                          <div class="pug-col   pug-col-lg-3" style="padding-left: 8px; padding-right: 8px;">
                            <pug-upload @callback="uploadSuccess" modal="2" cref="avatar" uploadname="avatar"
                                        v-model="sysloginuser.avatar" :key="timer"></pug-upload>
                            <div style="display: none;">
                              <pug-input placeholder="请上传头像" cref="avatar" v-model="sysloginuser.avatar" type="text"></pug-input>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="性别 1:男  0:女  2:保密">性别 1:男  0:女  2:保密
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入性别 1:男  0:女  2:保密" cref="sex" maxlen="11"  v-model="sysloginuser.sex" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="国家">国家
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入国家" cref="country" maxlen="32"  v-model="sysloginuser.country" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="省份">省份
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入省份" cref="province" maxlen="32"  v-model="sysloginuser.province" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="城市">城市
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入城市" cref="city" maxlen="32"  v-model="sysloginuser.city" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="区县">区县
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入区县" cref="district" maxlen="32"  v-model="sysloginuser.district" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="简介">简介
                                <span class='pug-valid-label'>(*必填)</span>
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                              <textarea rows="4" placeholder="请输入简介" id="description" v-model="sysloginuser.description" maxlength="100" class="pug-input pro-field pro-field-xl"></textarea>
                            </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="请上传封面图">请上传封面图
                            </label>
                          </div>
                          <div class="pug-col   pug-col-lg-3" style="padding-left: 8px; padding-right: 8px;">
                            <pug-upload @callback="uploadSuccess2" modal="2" cref="bgImg" uploadname="bgImg"
                                        v-model="sysloginuser.bgImg" :key="timer"></pug-upload>
                            <div style="display: none;">
                              <pug- placeholder="请上传封面图" cref="bgImg" v-model="sysloginuser.bgImg" type="text"></pug->
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="激活状态 1 激活 0未激活">激活状态 1 激活 0未激活
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                              <pug-radio v-model="sysloginuser.status" cref="status" :items='[{text:"是",value:1},{text:"否",value:0}]' :is-value="false"></pug-radio>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="密码">密码
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入密码" cref="password" maxlen="100"  v-model="sysloginuser.password" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="">删除状态
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                              <pug-radio v-model="sysloginuser.isdelete" cref="isdelete" :items='[{text:"不删除",value:0},{text:"删除",value:1}]' :is-value="false"></pug-radio>
                            </div>
                            </div>
                          </div>
                        </div>
                        <!--保存和下一步按钮-->
                        <div class="pug-space pug-space-horizontal pug-space-align-center"
                             style="flex-wrap: wrap; gap: 8px;">
                          <div class="pug-space-item" style="">
                             <router-link to="/sysloginuser"><button  class="pug-btn pug-btn-primary mr10"><span><i class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button></router-link>
                             <button type="button" v-if="!sysloginuser.id" class="pug-btn pug-btn-primary mr3" @click="saveorupdate()"><span><i class="iconfont icon-tianjia pr3"></i>保存</span></button>
                             <button type="button" v-if="sysloginuser.id" class="pug-btn pug-btn-primary mr3" @click="saveorupdate()"><span><i class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>
                           </div>
                          <div class="pug-space-item" style="">
                            <button type="button" class="pug-btn" @click="next(2)"><span>下一步</span>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
             <div v-show="currentStep==2" class="pug-card mt20">
              2
             </div>
             <div v-show="currentStep==3" class="pug-card mt20">
              3
             </div>
             <div v-show="currentStep==4" class="pug-card mt20">
              4
             </div>
             <div v-show="currentStep==5" class="pug-card mt20">
               5
             </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</main>
</template>
<script>
import sysloginuserService from '@/services/sysloginuser'
import pugDialog from "@/plugins/PugDialog";
import pugMessage from "@/plugins/PugMessage";
import {isEmpty,getById,isNotEmpty} from "@/utils/validate";
import cache from "@/utils/cache"
import PugInput from "@/components/form/PugInput";
export default {
  name: "SysLoginUserAdd.vue",
  components: {PugInput},
  data() {
    return {
      opid: "",
      sysloginuser:{
        id:"", //
        phone:"", // 手机号
        nickname:"", // 昵称，媒体号
        idcode:"", // 唯一标识
        avatar:"", // 头像
        sex:"", // 性别 1:男  0:女  2:保密
        country:"", // 国家
        province:"", // 省份
        city:"", // 城市
        district:"", // 区县
        description:"", // 简介
        bgImg:"", // 个人介绍的背景图
        status:1 , // 激活状态 1 激活 0未激活
        password:"", // 密码
        openid:"", // 微信登录openid
        unionid:"", // 微信登录unionid
        isdelete:0  //
      },

      currentStep: 1,
      steps: [1, 2, 3]
    }
  },

  created() {
    // 根据id用户管理明细
    if(!isEmpty(this.$route.params.id)){
      this.sysloginuser.id = this.$route.params.id;
      this.opid = this.$route.params.id;
      // 加载明细
      this.getDetail();
    }else{
      if(isNotEmpty(cache.local.get("sysloginuser_save"))) {
        this.sysloginuser = cache.local.getJSON("sysloginuser_save")
      }
    }
  },

   watch:{
      sysloginuser:{
        deep:true,
        handler(val,newval){
          cache.local.setJSON("sysloginuser_save",newval);
        }
      }
   },

  methods: {

    // 加载明细
    async getDetail(){
      try{
        const res = await  sysloginuserService.getSysLoginUser(this.opid);
        this.sysloginuser = res.data;
      }catch (err) {
        pugMessage.error("服务器异常,代号：1025");
      }
    },

    // 1: 保存方法
    async saveorupdate() {
        try{
            pugDialog.confirm('提示',"你确定进行【"+(this.sysloginuser.id?'更新':'保存')+"】吗？").then(async ()=>{
                // 执行服务器数据保存用户管理
                const res = await  sysloginuserService.saveUpdateSysLoginUser(this.sysloginuser);
                if(res.status == 200){
                    if(isEmpty(this.sysloginuser.id)){
                        // 重置数据
                        this.reset();
                        cache.local.remove("sysloginuser_save");
                        // 返回列表
                        pugMessage.success("添加成功");
                        this.$router.push("/sysloginuser/list");
                    }else{
                        cache.local.remove("sysloginuser_save");
                        // 返回列表
                        pugMessage.success("修改成功");
                        this.$router.push("/sysloginuser/list");
                    }
                }
            })
        }catch(err){
            pugMessage.error("服务器异常,代号：1025");
        }
    },

    // 2: 校验
    async validator(){

        if(isEmpty(this.sysloginuser.phone)){
           pugMessage.error("请输入手机号");
           getById('phone').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.nickname)){
           pugMessage.error("请输入昵称，媒体号");
           getById('nickname').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.idcode)){
           pugMessage.error("请输入唯一标识");
           getById('idcode').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.avatar)){
           pugMessage.error("请输入头像");
           getById('avatar').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.sex)){
           pugMessage.error("请输入性别 1:男  0:女  2:保密");
           getById('sex').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.country)){
           pugMessage.error("请输入国家");
           getById('country').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.province)){
           pugMessage.error("请输入省份");
           getById('province').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.city)){
           pugMessage.error("请输入城市");
           getById('city').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.district)){
           pugMessage.error("请输入区县");
           getById('district').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.description)){
           pugMessage.error("请输入简介");
           getById('description').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.bgImg)){
           pugMessage.error("请输入个人介绍的背景图");
           getById('bgImg').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.status)){
           pugMessage.error("请输入激活状态 1 激活 0未激活");
           getById('status').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.password)){
           pugMessage.error("请输入密码");
           getById('password').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.openid)){
           pugMessage.error("请输入微信登录openid");
           getById('openid').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.unionid)){
           pugMessage.error("请输入微信登录unionid");
           getById('unionid').focus();
           return false;
        }

        if(isEmpty(this.sysloginuser.isdelete)){
           pugMessage.error("请输入");
           getById('isdelete').focus();
           return false;
        }

        return true;
    },

    // 3: 步骤分解
    prev(index) {
      this.currentStep = index;
    },

    next(index) {
      this.currentStep = index;
    },

    // 4: 文件上传回调
    uploadSuccess(response) {
      this.sysloginuser.avatar = response.url;
      console.log("uploadSuccess:", response)
    },

    // 4: 文件上传回调
    uploadSuccess2(response) {
      this.sysloginuser.bgImg = response.url;
      console.log("uploadSuccess:", response)
    },

    // 5: 重置数据
    reset(){
        this.sysloginuser = {
         citems: [{text:"请选择",value:""}],
         id:"", //
         phone:"", // 手机号
         nickname:"", // 昵称，媒体号
         idcode:"", // 唯一标识
         avatar:"", // 头像
         sex:"", // 性别 1:男  0:女  2:保密
         country:"", // 国家
         province:"", // 省份
         city:"", // 城市
         district:"", // 区县
         description:"", // 简介
         bgImg:"", // 个人介绍的背景图
         status:"", // 激活状态 1 激活 0未激活
         password:"", // 密码
         openid:"", // 微信登录openid
         unionid:"", // 微信登录unionid
         isdelete:"" //
       }
    },


  }
}
</script>
<style scoped="">
</style>
